<template>
  <div class="app-container">
    <div class="section-box">

      <el-row :gutter="10"
        class="mb8">
        <el-col :span="1.5">
          <el-button type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd">新增</el-button>
        </el-col>

      </el-row>

      <el-table v-loading="loading"
        :data="dataList">
        <el-table-column label="卦序"
          align="center"
          prop="guaId"
          min-width="60" />
        <el-table-column label="卦名"
          align="center"
          prop="name"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column label="一句简介"
          align="center"
          prop="breif"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column label="卦义或象征"
          align="center"
          prop="likes"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column label="Icon"
          align="center"
          prop="icon"
          :show-overflow-tooltip="true"
          min-width="120">
          <template slot-scope="scope">
            <div>
              <el-image style="width: 50px; height: 50px;"
                :src="scope.row.icon"
                :preview-src-list="[scope.row.icon]"
                fit="cover"
                preview-teleported="true" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="拼音"
          align="center"
          prop="pinYin"
          :show-overflow-tooltip="true"
          min-width="120" />
        <el-table-column label="名字描述"
          align="center"
          prop="nameDesc"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column label="级别"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yj_guai_level"
              :value="scope.row.level" />
          </template>
        </el-table-column>
        <el-table-column label="卦联"
          align="center"
          prop="lian"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column label="卦德"
          align="center"
          prop="de"
          :show-overflow-tooltip="true"
          min-width="120" />
        <el-table-column label="吉凶"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yj_ji_xiong"
              :value="scope.row.jiXiong" />
          </template>
        </el-table-column>
        <el-table-column label="象曰"
          align="center"
          prop="xiang"
          :show-overflow-tooltip="true"
          min-width="120" />
        <el-table-column label="象曰解释"
          align="center"
          prop="xiangDesc"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column label="卦词"
          align="center"
          prop="ci"
          :show-overflow-tooltip="true"
          min-width="120" />
        <el-table-column label="卦词解释"
          align="center"
          prop="ciDesc"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column label="彖曰"
          align="center"
          prop="tuan"
          :show-overflow-tooltip="true"
          min-width="120" />
        <el-table-column label="彖曰解释"
          align="center"
          prop="tuanDesc"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column label="用九"
          align="center"
          prop="yongJiu"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column label="卦画"
          align="center"
          :show-overflow-tooltip="true"
          min-width="120">
          <template slot-scope="scope">
            <div>
              <el-image style="width: 50px; height: 50px;"
                :src="scope.row.images"
                :preview-src-list="[scope.row.images]"
                fit="cover"
                preview-teleported="true" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建人"
          align="center"
          prop="createBy"
          min-width="140"
          show-overflow-tooltip />
        <el-table-column label="创建时间"
          align="center"
          prop="createTime"
          min-width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新人"
          align="center"
          prop="updateBy"
          min-width="140"
          show-overflow-tooltip />
        <el-table-column label="更新时间"
          align="center"
          prop="updateTime"
          min-width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注"
          align="center"
          prop="remark"
          :show-overflow-tooltip="true"
          min-width="160" />

        <el-table-column label="操作"
          align="center"
          class-name="small-padding fixed-width"
          fixed="right"
          min-width="220">
          <template slot-scope="scope">
            <el-button size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button size="mini"
              type="text"
              icon="el-icon-user"
              @click="handleSayGua(scope.row)">名嘴说卦</el-button>
            <el-button size="mini"
              type="text"
              icon="el-icon-guide"
              @click="handleGuaDivination(scope.row)">卦与占卜</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>

  </div>
</template>

<script>
import {
  getDivinationList,
  divinationDetail,
  addDivination,
  updateDivination
} from "@/api/divination/divination64.js";
import { onInput } from '@/utils/util.js'

export default {
  name: "Divination64",
  dicts: ["yj_guai_level", 'yj_ji_xiong'],
  data () {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 数据列表
      dataList: []
    };
  },
  created () {
    this.getList();
  },
  methods: {
    onInput,
    /** 查询列表 */
    getList () {
      this.loading = true;
      getDivinationList(this.queryParams).then(
        (response) => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    handleSayGua (row) {
      const guaId = row.guaId;
      this.$router.push("/divination/divination64-sayGua/sayGua/" + guaId);
    },
    handleGuaDivination (row) {
      const guaId = row.guaId;
      this.$router.push("/divination/divination64-guaDivination/guaDivination/" + guaId);
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 新增按钮操作 */
    handleAdd () {
      this.$router.push("/divination/divination64-setGua/addGua");
    },
    handleUpdate (row) {
      const guaId = row.guaId;
      this.$router.push("/divination/divination64-setGua/editGua/" + guaId);
    }

  },
};
</script>
